<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
		
				<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
			</head>
			<body>
				<div id="app">
					{{message}}
					<h1>v-bind指令</h1>
					<h2>绑定到src属性</h2>
					<img src="yes.png" alt="">
					<img v-bind:src="imgSrc" alt="" v-on:click="change"/>
					<img :src="imgSrc" alt="" v-on:click="change"/>
					<a v-bind:[attributename]="url">链接</a>
					
					<form v-bind="formObj">
						<input type="text"/>				
					</form>
				</div>
				
				<script>
					var app = Vue.createApp({
						data() {
							return {
								message: "Hello Vue!",
								attributename:'href',
								url:"http://www.baidu.com",
								imgSrc:"./yes.png",
								fileName:"no.png",
								formObj:{
									method:"post",
									action: "#"
								}
							}
						},
						methods:{
							change:function()
							{
								if (this.imgSrc=="./yes.png")
								{
									this.imgSrc="./no.png"
								}
								else
								{
									this.imgSrc="./yes.png"
								}
							}
						}
					});
					var vm = app.mount("#app")
				</script>
		
			</body>
		</html>
	</body>
</html>